lobsterlayui.main(['index', 'layer', 'form', 'element', 'table'], {
    data: {
        $layui: null,
        layerindex: 0,
        page: 1,
        limit: 8,
        labeltype1: '',
        labeltype2: '',
        labeltype3: '',
        keywords: '',
        more: false
    },
    pageload: function (right) {
        console.log(right);
        this.initevent();
        this.loadlabeltype();
        this.loadtemplateform();
    },
    //初始化事件
    initevent: function () {
        var self = this;


        //查找reload,通过条件，查询网格的table重载数据显示到界面
        layui.form.on("submit(LAY-app-front-search)", function (data) {
            self.data.keywords = data.field.txtName;
            self.loadtemplateform();
        });

        $(window).bind('scroll', function () {
            if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
                self.loadtemplateform(true);
            }
        });

    },
    loadlabeltype: function () {
        var self = this;
        lobsterlayui.GETAPI('tsTemplate.getlabeltype').then(retdata => {
            var data = retdata['data'];
            $('#labeltype1').empty();
            $('#labeltype1').append('<a href="javascript:void(0);" class="layui-btn layui-btn-sm selectbtn" value="">全部</a>');
            $('#labeltype2').empty();
            $('#labeltype2').append('<a href="javascript:void(0);" class="layui-btn layui-btn-sm selectbtn" value="">全部</a>');
            $('#labeltype3').empty();
            $('#labeltype3').append('<a href="javascript:void(0);" class="layui-btn layui-btn-sm selectbtn" value="">全部</a>');
            data.forEach(element => {
                if (element.Type == "1") {
                    $('#labeltype1').append('<a href="javascript:void(0);" value="' + element.Code + '">' + element.Name + '</a>');
                }
                else if (element.Type == "2") {
                    $('#labeltype2').append('<a href="javascript:void(0);" value="' + element.Code + '">' + element.Name + '</a>');
                }
                else if (element.Type == "3") {
                    $('#labeltype3').append('<a href="javascript:void(0);" value="' + element.Code + '">' + element.Name + '</a>');
                }
            });

            layui.element.render('breadcrumb');

            $('#labeltype1 > a').click(function () {
                self.data.labeltype1 = $(this).attr('value');
                $('#labeltype1 > a').removeClass('layui-btn');
                $('#labeltype1 > a').removeClass('layui-btn-sm');
                $('#labeltype1 > a').removeClass('selectbtn');
                $(this).addClass('layui-btn layui-btn-sm selectbtn');

                self.loadtemplateform();
            });

            $('#labeltype2 > a').click(function () {
                self.data.labeltype2 = $(this).attr('value');
                $('#labeltype2 > a').removeClass('layui-btn');
                $('#labeltype2 > a').removeClass('layui-btn-sm');
                $('#labeltype2 > a').removeClass('selectbtn');
                $(this).addClass('layui-btn layui-btn-sm selectbtn');

                self.loadtemplateform();
            });

            $('#labeltype3 > a').click(function () {
                self.data.labeltype3 = $(this).attr('value');
                $('#labeltype3 > a').removeClass('layui-btn');
                $('#labeltype3 > a').removeClass('layui-btn-sm');
                $('#labeltype3 > a').removeClass('selectbtn');
                $(this).addClass('layui-btn layui-btn-sm selectbtn');

                self.loadtemplateform();
            });
        })
    },
    loadtemplateform: function (isscroll) {
        var self = this;

        if (!isscroll) {
            $('#formlist').empty();
            self.data.page = 1;
            self.data.more = true;
        }

        if (!self.data.more) {
            return;
        }
        var param = {
            page: self.data.page, limit: self.data.limit, keywords: self.data.keywords, labeltype1: self.data.labeltype1, labeltype2: self.data.labeltype2, labeltype3: self.data.labeltype3
        }
        lobsterlayui.GETAPI('tsTemplate.gettemplateform', param).then(retdata => {
            var data = retdata['data'];
            self.data.more = retdata.more;
            self.data.page = self.data.page + 1;

            var phoneurl = 'formtemplatepreview.html?appid=' + lobsterlayui.GetAppId() + '&formid=';

            if (data.length) {
                var html = '<div class="layui-row layui-col-space15">';
                data.forEach(element => {
                    html += '<div class="layui-col-md3">';
                    html += '<div class="layui-card">';
                    html += '<div class="layui-card-header">' + element.Title + '</div>';
                    html += '<div class="layui-card-body">';
                    html += '<div class="selectform" style="text-align: center;" value="' + phoneurl + element.Id + '"><img src="' + element.HeadPic + '" style="width: 200px;height: 300px;"></div>';
                    html += '</div>';
                    html += '</div>';
                    html += '</div>';
                });
                html += '</div>';
                $('#formlist').append(html);
            } else {
                $('#formlist').append('<div style="text-align: center;">没有搜索到问卷</div>');
            }

            $('.selectform').unbind().click(function () {
                layer.open({
                    type: 2
                    , title: '预览问卷'
                    , content: $(this).attr('value')
                    //, maxmin: true
                    , area: ['480px', '680px']  //宽，高
                    //, btn: ['保存', '取消']
                });
            })
        })

    }
})